<template>
    <div id="userdetail">
        <div>账号信息</div>
        <p><i class="el-icon-user" style="margin-right: 12px;"></i> 账号：{{ userdetail.username }}</p>
        <p><i class="el-icon-key" style="margin-right: 12px;"></i> 密码：********* </p>
        <p><i class="el-icon-mobile-phone" style="margin-right: 12px;"></i> 电话：{{ userdetail.phone }} </p>
        <p><i class="el-icon-postcard" style="margin-right: 12px;"></i> 身份：学生</p>
        <div class="updatedetail">
            <el-button type="primary" @click="dialogFormVisible1 = true; telnum = userdetail.telnum">修改信息</el-button>
        </div>


        <!-- 修改信息表单 -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible1">
            <el-form :model="userdetail">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="userdetail.username" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="userdetail.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份" :label-width="formLabelWidth">
                    <el-input placeholder="学生" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input placeholder="* * * * * * *" :disabled="true" autocomplete="off"></el-input>
                    <span style="cursor: pointer;color: #409EFF;margin-left: 8px;"
                        @click="dialogFormVisible = false; dialogFormVisible2 = true">去修改密码</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false; userdetail.phone = telnum">取 消</el-button>
                <el-button type="primary" @click="updatedetail()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改密码表单 -->
        <el-dialog title="修改密码信息" :visible.sync="dialogFormVisible2">
            <el-form :model="newpassword">
                <el-form-item label="输入原密码" :label-width="formLabelWidth2">
                    <el-input show-password v-model="newpassword.password1" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="userdetail">
                <el-form-item label="确认原密码" :label-width="formLabelWidth2">
                    <el-input show-password v-model="newpassword.password2" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="userdetail">
                <el-form-item label="输入新密码" :label-width="formLabelWidth2">
                    <el-input show-password v-model="newpassword.newpassword" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false; userdetail.telnum = telnum">取 消</el-button>
                <el-button type="primary" @click="updatepassword()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            dialogFormVisible1: false,//控制表单是否打开
            dialogFormVisible2: false,//控制修改密码表单是否打开
            formLabelWidth: '120px',
            formLabelWidth2: '120px',
            newpassword: {
                password1: "",
                password2: "",
                newpassword: ""
            },
            telnum: ""
        }
    },
    props: {
        userdetail: {},

    },
    methods: {
        updatedetail() {//改电话号码
            var _telnum = this.phone;
            if (this.userdetail.phone == "") {
                this.$message('请输入完整信息');
            } else {
                var _this = this;
                console.log(_this.userdetail.uid + "       " + _this.userdetail.phone);
                axios({
                    method: "put",
                    url: "api/users/updatePhone",
                    data: {
                        "uid": _this.userdetail.uid,
                        "phone": _this.userdetail.phone
                    }
                }).then(function (resp) {
                    if (resp.data.code == "200") {
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    } else {
                        _this.$message('修改出错');
                    }

                    _this.dialogFormVisible1 = false;
                })
                

            }
        },
        updatepassword() {//改密码
            if (this.newpassword.newpassword == "" || this.newpassword.password1 == "" || this.newpassword.password2 == "") {
                //输入完整信息
                this.$message('请输入完整信息');
            } else if (this.newpassword.password1 != this.newpassword.password2) {
                //两次密码不一致
                this.$message({
                    message: '两次密码不一致',
                    type: 'warning'
                });
            } else {
                var _this=this;
                // console.log(_this.newpassword.password1);
                axios({
                    method: "put",
                    url: "api/users/changePassword",
                    data: {
                        "uid": _this.userdetail.uid,
                        "oldPassword": _this.newpassword.password1,
                        "newPassword": _this.newpassword.newpassword
                    }
                }).then(function (resp) {
                    console.log(resp);
                    if(resp.data.code=="200"){
                        _this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                    }else{
                        _this.$message(resp.data.msg);
                    }
                    
                    _this.dialogFormVisible2 = false;
                })
                this.newpassword.password1 = "";
                this.newpassword.password2 = "";
                this.newpassword.newpassword = "";
            }
        }
    },
    mounted() {
        // console.log(this.userdetail);
    }
}
</script>
<style scoped>
#userdetail {
    position: relative;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    text-align: initial;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}

#userdetail>div:first-of-type {
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}

#userdetail .updatedetail {
    margin-top: 32px;
}
</style>